<template>
  <!-- 流程分析 -->
  <Process v-if="[2, 9978, 9979].includes(Number(ids))" :ids="ids"></Process>
  <!-- 节点 -->
  <Node v-else-if="[91].includes(Number(ids))" :menuId="ids"></Node>
  <!-- QQCTN隐患分析 -->
  <AnalysisLook v-else-if="[997].includes(Number(ids))"></AnalysisLook>
  <!--  -->
  <!-- <SeeAlsoDig v-else-if="[9978].includes(Number(ids))"></SeeAlsoDig> -->
  <!-- 流程看板 -->
  <!-- <ProcessLook v-else-if="ids == 15"></ProcessLook> -->
  <div class="mainWrap" v-else>
    <div v-if="treeList.length > 0 && ![18].includes(Number(ids))" style="widows: 100%">
      <TreeList :changeBoolean="changeBoolean" :treeList="treeList" :onCallBack="treeClick" :ids="ids"
        :onTreeRefresh="callBack" :treeSet="treeSet">
      </TreeList>
    </div>
    <div class="main" v-if="![18].includes(Number(ids))"
      :class="{ isWidth: isLeftTreeBoolean && [977].includes(Number(ids)) }">
      <div class="topWrap" v-if="!typeTree.includes(Number(ids)) && ![15].includes(Number(ids))">
        <a-space>
          <a-button type="default" class="defaultButton" @click="handOnRefresh">
            <Icons type="sync"></Icons>
          </a-button>
          <a-space v-if="ids == 4">
            <ZSUpload sponsoredUnit="sponsoredUnit" :treeKey="treeKey"></ZSUpload>
            <Analysis :sponsoredUnit="sponsoredUnit" :treeKey="treeKey"></Analysis>
            <HILookModal :sponsoredUnit="sponsoredUnit" :treeKey="treeKey"></HILookModal>
            <StepBtn :treeKey="treeKey" :treeList="treeList" :otherProps="otherProps"></StepBtn>
          </a-space>
          <FormProcess v-if="[92].includes(Number(ids))" :onCallBack="onBackData" :formData="otherData"
            :dataIndex="dataIndexObj[ids]">
          </FormProcess>
          <AddButton :menuId="ids"
            v-if="[6, 7, 8, 16, 994, 995, 996,].includes(Number(ids)) || (Number(ids) == 92 && otherData[dataIndexObj[ids]])"
            :onRefresh="handOnRefresh" :aParams="otherData">
          </AddButton>
          <FileUpload v-if="[993].includes(Number(ids))" :treeList="treeList" :callBack="callBack"></FileUpload>
          <a-space v-else-if="[994, 995,].includes(Number(ids))">
            <ExportButton :menuId="ids" :aParams="{ keyWord: keyWord, ...otherData }"></ExportButton>
          </a-space>
          <a-space v-if="[977].includes(Number(ids)) && otherData['company']" class="buttonChangeWrap">
            <a-button @click="handChangeLedger">总台账<a-icon type="double-right" v-if="!isLedgerBoolean" /> <a-icon
                type="double-left" v-else /></a-button>
            <a-space v-if="isLedgerBoolean" class="mhqButtonSpace">
              <AddButton :menuId="ids" :onRefresh="handOnRefresh" :aParams="otherData">
              </AddButton>
              <ExportButton :menuId="ids" :aParams="{ keyWord: keyWord, ...otherData }"></ExportButton>
              <!-- 巡检记录导出 -->
              <ExportXunjian :menuId="ids" :aParams="{ keyWord: keyWord, ...otherData }" :treeKey="treeKey">
              </ExportXunjian>
              <!-- 送检批量导入 -->
              <ImportSubmission :onCallBack="onSubmit">
              </ImportSubmission>
              <!-- 二维码 -->
              <CodeOptions :aParams="{ keyWord: keyWord, ...otherData }" :onCallBack="onSubmit"
                v-if="staticData.isCode"></CodeOptions>
            </a-space>
            <a-space>
              <ButtonChang :menuId="ids" :otherData="otherData" :onCallBack="onBackData" dataIndex="searchType"
                dataVal="1">
              </ButtonChang>
              <ButtonChang :menuId="ids" :otherData="otherData" :onCallBack="onBackData" dataIndex="searchType"
                dataVal="2">
              </ButtonChang>
              <ButtonChang :menuId="ids" :otherData="otherData" :onCallBack="onBackData" dataIndex="searchType"
                dataVal="3">
              </ButtonChang>
            </a-space>
          </a-space>
          <!-- 灭火器的地图按钮功能 -->
          <ShowMapDot v-if="[994].includes(Number(ids))"></ShowMapDot>
        </a-space>
        <a-space>
          <SelectPost :onCallBack="onBackChangeForm" :formData="otherData"
            :dataIndex="ids == 3 ? 'status' : dataIndexObj[ids]" v-if="[995, 3].includes(Number(ids))"
            :staticOptionList="ids == 3 ? [{ label: '进行中', value: 'RUNNING' }, { label: '已撤销', value: 'TERMINATED' }, { label: '已完成', value: 'COMPLETED' }] : []"
            :placeholderInfo="ids == 3 ? '请选择工单状态' : ''">
          </SelectPost>
          <ZsData :menuId="ids" :onFormChange="onFormChange" :otherData="otherData" v-if="[3, 4].includes(Number(ids))">
          </ZsData>
          <div style="width: 120px;" v-if="[962].includes(Number(ids))">
            <ZsSelect :menuId="ids" :onFormChange="onFormChange" :otherData="otherData" :item="dataFormObj[ids][0]">
            </ZsSelect>
          </div>
          <!-- 灭火器所在位置、规格型号 -->
          <a-input v-model="keyWord" placeholder="请输入关键字" v-if="![18,].includes(Number(ids))"></a-input>
          <a-space v-if="[3, 4, 6, 7, 8, 16, 92, 993, 994, 995, 996, 977, 962].includes(Number(ids))">
            <a-button type="danger" @click="onReset">重置</a-button>
            <a-button type="primary" @click="onSubmit">搜索</a-button>
          </a-space>
        </a-space>
      </div>
      <div class="contentWrap" :class="{ contentWrapAll: !(ids && !typeTree.includes(Number(ids))) }">
        <template v-if="ids && Number(ids) == 15">
          <ProcessLook :sponsoredUnit="sponsoredUnit" :menuId="ids"></ProcessLook>
        </template>
        <template v-else-if="ids && !typeTree.includes(Number(ids))">
          <TableList :tableName="ids" :dataList="dataList" :menuId="ids" :onRefresh="handOnRefresh"
            :loading="loading.dataLoading" :otherData="otherData" :staticData="staticData" :treeKey="treeKey">
          </TableList>
        </template>
        <template v-else>
          <MenuTree :menuId="ids"></MenuTree>
        </template>
      </div>
      <div class="paginationWrap" v-if="ids && !typeTree.includes(Number(ids)) && !noHasPage.includes(Number(ids))">
        <a-space>
          共<span style="padding: 0px 4px">{{ total }}</span>条
        </a-space>
        <a-space>
          <a-pagination :current="pagination.pageNum" :pageSize="pagination.pageSize" size="small" :total="total"
            show-size-changer show-quick-jumper @change="paginChange" @showSizeChange="onShowSizeChange"
            :page-size-options="staticPageSizeOptions" />
        </a-space>
      </div>
    </div>
    <template v-else-if="[18].includes(Number(ids))">
      <Steps :sponsoredUnit="sponsoredUnit" :menuId="ids" :treeKey="treeKey" :treeList="treeList"
        :otherProps="otherProps"></Steps>
    </template>
  </div>
</template>
<script>
import ZSUpload from "@/components/ZSUpload/ZSUpload";
import Icons from "./components/Icons.vue";
import TreeList from "./components/TreeList";
import TableList from "./components/TableList";
import AddButton from "./components/AddButton.vue";
import { locationF, staticPageSizeOptions } from "./js/js";
import MenuTree from "./components/MenuTree";
import Process from "./Process/process.vue";
import ZsData from "./components/ZsData";
import ProcessLook from "./ProcessLook";
import Analysis from "@/components/ZSDrawer/Analysis";
import Steps from "./components/Steps";
import Node from './Node';
import FormProcess from "./components/FormProcess";
import { dataIndexObj, dataFormObj } from "./components/js/js.js";
import ExportButton from './components/ExportButton';
import FileUpload from './components/FileUpload';
import SelectPost from "./components/SelectPost.vue";
import AnalysisLook from './AnalysisLook/AnalysisLook.vue'
import ShowMapDot from './components/ShowMapDot';
import ExportXunjian from "./components/ExportXunjian.vue";
import ZsSelect from './components/TableFail/ZsSelect.vue';
import ButtonChang from './components/Fire/ButtonChang.vue'
import ImportSubmission from './components/Fire/ImportSubmission.vue';
import CodeOptions from './components/Fire/CodeOptions.vue'
import HILookModal from './components/HILookModal.vue';
import StepBtn from './components/Button/StepBtn.vue';


export default {
  name: "Tables",
  components: {
    Icons,
    TreeList,
    TableList,
    ZSUpload,
    AddButton,
    MenuTree,
    Process,
    ZsData,
    ProcessLook,
    Analysis,
    Steps,
    Node,
    FormProcess,
    ExportButton,
    FileUpload,
    SelectPost,
    AnalysisLook,
    ShowMapDot,
    ExportXunjian,
    ZsSelect,
    ButtonChang,
    ImportSubmission,
    CodeOptions,
    HILookModal,
    StepBtn,
  },
  props: {
    menuId: {
      type: [String, Number],
      default: "",
    },
    otherProps: {
      type: Object,
    }
  },
  data() {
    return {
      /* 表格用到的数据 */
      pagination: {
        pageNum: 1,
        pageSize: 100,
      },
      total: 0,
      treeKey: {},
      sponsoredUnit: 1,
      keyWord: "",
      userName: "",
      status: "",
      startTime: "",
      endTime: "",
      treeList: [],
      // 树状图补充的设置
      treeSet: {},
      dataList: [],
      ids: "",
      typeTree: [9, 13],
      // 是否需要分页
      noHasPage: [15],
      loading: {
        treeLoading: false,
        dataLoading: false,
      },
      // 其他数据
      otherData: {},
      dataIndexObj: dataIndexObj,
      dataFormObj,
      // 左侧树状图展开收起
      isLeftTreeBoolean: false,
      // 灭火器台账-按钮展开功能
      isLedgerBoolean: false,
      // 全部数据
      staticData: {},
      // 分页
      staticPageSizeOptions,
    };
  },
  methods: {
    // 树状图展开收起
    changeBoolean(e) {
      this.isLeftTreeBoolean = e;
    },
    onBackData(val, dataI) {
      let obj = this.otherData;
      obj[dataI] = val;
      this.otherData = JSON.parse(JSON.stringify(obj));
      this.questPostData({ ...obj, ...this.pagination });
    },
    onBackChangeForm(val, dataI) {
      let obj = this.otherData;
      obj[dataI] = val;
      this.otherData = JSON.parse(JSON.stringify(obj));
    },
    paginChange(current, pageSize) {
      let newPaginTion = {
        ...this.pagination,
        pageNum: current,
        pageSize,
      };
      this.pagination = newPaginTion;
      locationF("set", "pageSize", this.ids, newPaginTion.pageSize);
      this.questPostData(this.pagination);
    },
    onShowSizeChange(current, pageSize) {
      let newPaginTion = {
        ...this.pagination,
        pageNum: current,
        pageSize,
      };
      this.pagination = newPaginTion;
      locationF("set", "pageSize", this.ids, newPaginTion.pageSize);
      this.questPostData(this.pagination);
    },
    // 重置操作
    onReset() {
      this.keyWord = "";
      this.staticData = {};
      this.otherData = {
        sorter: this.otherData.sorter,
      };
      if (this.ids == '977') {
        this.otherData = {
          ...this.otherData,
          searchType: '0',
        }
      }
      this.handOnRefresh({ ...this.resetPagina() });
    },
    // 搜索
    onSubmit() {
      this.handOnRefresh({ ...this.resetPagina() });
    },
    treeListFormat(item) {
      let tempItem = {
        ...item,
        value: item.id,
      };
      if (Array.isArray(item.child) && item.child.length > 0) {
        tempItem["disabled"] = true;
        tempItem["child"] = tempItem["child"].map((val) => {
          return {
            ...val,
            ...this.treeListFormat(val),
          };
        });
      } else {
        tempItem["disabled"] = false;
      }
      return tempItem;
    },
    questGetData(type, aParams, url) {
      let tempUrl = this[`$${url}`];
      let tempParams = {
        ...aParams,
      };
      if (this.loading.treeLoading) {
        return;
      }
      this.loading = {
        ...this.loading,
        treeLoading: true,
      };
      this.getAxios(tempUrl, tempParams)
        .then((res) => {
          if (res.code == 200) {
            let routeInfo = this.$route.query || {};
            if (
              (routeInfo && routeInfo.id && tempParams.deptid == routeInfo.id) ||
              (this.menuId != "" && this.menuId == tempParams.deptid)
            ) {
              let data = res.data;
              if (type == "tree") {
                if (this.ids == 18) {
                  data = data.map((val) => {
                    return {
                      ...val,
                      value: val.id,
                      ...this.treeListFormat(val),
                    };
                  });
                }
                this.treeList = data;
                // 树状图的设置-默认展开项
                this.treeSet = {
                  ...this.treeSet,
                  defaultExpand: res.defaultExpand || [],
                }
              }
            }
          }
        })
        .catch(() => { })
        .finally(() => {
          setTimeout(() => {
            this.loading = {
              ...this.loading,
              treeLoading: false,
            };
          }, 300);
        });
    },
    questPostData(aData) {
      let sendType = 'postAxios';
      let data = {
        ...this.pagination,
        sponsoredUnit: this.sponsoredUnit,
        keyWord: this.keyWord,
        // userName: this.userName,
        status: this.status,
        startTime: this.startTime,
        endTime: this.endTime,
        ...this.otherData,
        ...aData,
      };
      let nowId = this.ids;
      let url;
      if (this.ids == "2") {
        url = this.$getfolwdatabyraletime;
      } else if (this.ids == "3") {
        url = this.$getfolwdatabydept;
        // 页面默认不请求，将数据初始化
        if (data.sponsoredUnit === 1) {
          this.staticData = {};
          this.total = 0;
          this.dataList = [];
          this.pagination = {
            ...this.pagination,
            pageNum: 1,
          }
          return;
        }
      } else if (this.ids == "4") {
        url = this.$getfolwdatabyhidden;
      } else if (this.ids == "6") {
        url = this.$getsguser;
        data = {
          ...this.pagination,
          userId: "",
          keyWord: this.keyWord,
          ...aData,
        };
      } else if (this.ids == "7") {
        url = this.$getmenuroles;
        data = {
          ...this.pagination,
          keyWord: this.keyWord,
          ...aData,
        };
      } else if (this.ids == "8") {
        url = this.$getdeptdataroles;
        data["keyWord"] = data["keyWord"];
      } else if (this.ids == "16") {
        url = this.$getFloowList;
        data["company"] = data.sponsoredUnit === 1 ? "" : data.sponsoredUnit;
      } else if (this.ids == "92") {
        url = this.$pageChatGroup;
      } else if (this.ids == "993") {
        url = this.$pageFile;
        data['directoryId'] = this.sponsoredUnit == 1 ? '' : this.sponsoredUnit;
        sendType = 'getAxios'
      } else if (this.ids == "994") {
        url = this.$pageList;
        sendType = 'getAxios';
      } else if (this.ids == "995") {
        url = this.$pageQGList;
        sendType = 'getAxios'
      } else if (this.ids == "996") {
        url = this.$pageDongkuangDangerEquipmentList;
        sendType = 'getAxios'
      } else if (this.ids == "977") {
        url = this.$mhqtzPageList;
        sendType = 'getAxios'
        data["company"] = data.sponsoredUnit === 1 ? "" : data.sponsoredUnit;
        if (data["company"] == '') {
          return;
        }
      } else if (this.ids == "962") {
        url = this.$pageList;
        sendType = 'getAxios'
      }
      // 如果不存在上面补充的id则不进行请求
      // 后面需要补充其他添加菜单的接口
      if (!url || this.loading.dataLoading) {
        return;
      }
      this.loading = {
        ...this.loading,
        dataLoading: true,
      };
      this[sendType](url, data)
        .then((res) => {
          if (res.code === 200 && nowId == this.ids) {
            let data = res.data;
            this.staticData = data;
            this.total = data.total;
            this.dataList = data.records;
            // 如果连续点击 第二页 第四页 第二页请求没回来 数据展示的就是第二页的 但是页码是第四页
            this.pagination = {
              ...this.pagination,
              pageNum: data.current,
              pageSize: data.size
            }
          }
        })
        .catch((err) => { })
        .finally(() => {
          setTimeout(() => {
            this.loading = {
              ...this.loading,
              dataLoading: false,
            };
          }, 300);
        });
    },
    treeClick(e = 1, n = {}) {
      let sponsoredUnit = e;
      this.sponsoredUnit = sponsoredUnit;
      this.treeKey = n;
      // 特殊性的--灭火器台账的新增需要公司
      if ([977].includes(Number(this.ids))) {
        this.otherData = {
          ...this.otherData,
          company: sponsoredUnit,
        }
      }
      this.questPostData({ sponsoredUnit: sponsoredUnit, ...this.resetPagina() });
    },
    // 重置分页
    resetPagina() {
      let newpagination = this.pagination;
      newpagination["pageNum"] = 1;
      this.pagination = newpagination;
      return newpagination;
    },
    getTreeList() {
      let id = this.ids;
      let params = {
        deptid: id,
      };
      if (id && ![995, 994, 16].includes(Number(id))) {
        this.questGetData("tree", params, "getdeptstree");
      }
    },
    // 初始化数据
    initData() {
      let ids;
      if (this.menuId != "") {
        ids = this.menuId;
      } else if (this.$route.query.id) {
        ids = this.$route.query.id;
      }
      this.ids = ids;
      this.pagination = {
        pageNum: 1,
        pageSize: locationF("get", "pageSize", ids) || 10,
      };
      this.total = 0;
      this.treeKey = {};
      this.sponsoredUnit = 1;
      this.keyWord = "";
      this.userName = "";
      this.status = "";
      this.startTime = "";
      this.endTime = "";
      this.treeList = [];
      this.dataList = [];
      this.otherData = {};
      this.loading = {
        dataLoading: false,
        treeLoading: false,
      };
      if (this.ids == '977') {
        this.otherData = {
          ...this.otherData,
          searchType: '0',
        }
      }
      // 获取缓存数据
      let locations = localStorage.getItem("locations");
      if (locations && ids && locations[ids]) {
        let loc = locations[ids];
        this.pagination = loc.pagination;
        this.total = loc.total;
      }
      if (this.ids != 2) {
        this.getTreeList();
        this.questPostData();
      }
    },
    // 刷新
    handOnRefresh(aParams) {
      this.otherData = {
        ...this.otherData,
        ...aParams,
      };
      this.questPostData(aParams);
    },
    // 日期修改
    onFormChange(aParams) {
      this.otherData = {
        ...this.otherData,
        ...aParams,
      };
    },
    // 流程看板的本地过滤
    onClickFilter() { },
    callBack() {
      let id = this.ids;
      let params = {
        deptid: id,
      };
      if (id && ![994, 995].includes(Number(id))) {
        this.questGetData("tree", params, "getdeptstree");
        this.onSubmit();
      }
    },
    handChangeLedger() {
      this.isLedgerBoolean = !this.isLedgerBoolean;
      if (this.otherData['searchType'] != 0) {
        this.onBackData(0, 'searchType');
      }
    },

  },
  mounted() {
    // 会多请求一次
    // this.initData();
  },
  watch: {
    // 监听路由对象
    $route: {
      handler: function (to, from) {
        this.initData();
      },
      // 设置为深度监听
      deep: true,
      immediate: false,
    },
    menuId: {
      handler: function () {
        this.initData();
      },
      // 设置为深度监听
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.mainWrap {
  height: 100%;
  width: 100%;
  display: flex;

  .main {
    height: 100%;
    width: 100%;
    background-color: var(--backColor);

    .topWrap {
      height: 40px;
      width: 100%;
      // background-color: pink;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 12px;
    }

    .contentWrap {
      height: calc(100% - 40px - 40px - 1px);
    }

    .contentWrapAll {
      height: 100%;
    }

    .paginationWrap {
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0px 12px;
      border-top: 1px solid #cdcdcd;
    }
  }
}

// 右侧内容宽度问题
.isWidth {
  // width: calc(100% - 210px) !important;
  animation: change 0.5s ease-in-out forwards;
}

@keyframes change {
  0% {
    width: calc(100%);
  }

  100% {
    width: calc(100% - 210px);
  }
}

.buttonChangeWrap {
  .ant-space-item {
    width: 100%;
  }
}

.mhqButtonSpace {
  animation: changeButton 0.5s ease-in-out forwards;
}

@keyframes changeButton {
  0% {
    width: 0%;
    overflow: hidden;
  }

  100% {
    width: 100%;
  }
}
</style>
